<!--
 * @Author: your name
 * @Date: 2022-03-12 18:03:04
 * @LastEditTime: 2022-03-13 17:50:33
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3-ts-food-admin\src\views\orderManage\orderManage.vue
-->
<template>
  <div class="orderManageContainer">
    <el-tabs
      v-model="state.activeTab"
      class="topTabContainer"
      @tab-click="handleClick"
    >
      <el-tab-pane label="今日订单" name="1">
        <div class="bodyContainer">
          <TodaysOrder />
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单列表" name="2">订单列表</el-tab-pane>
      <el-tab-pane label="配送管理" name="3">配送管理</el-tab-pane>
      <el-tab-pane label="收银统计" name="4">收银统计</el-tab-pane>
      <el-tab-pane label="送货统计" name="5">送货统计</el-tab-pane>
      <el-tab-pane label="销售统计" name="6">
        <SalesStatistics />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import SalesStatistics from "./childrenViews/salesStastitics.vue";
import TodaysOrder from "./childrenViews/todaysOrder.vue";

export default defineComponent({
  setup() {
    const state = reactive({
      activeTab: "1",
    });

    const handleClick = (tab: any) => {
      state.activeTab = tab.paneName;
      console.log(tab.paneName);
    };

    return {
      state,
      handleClick,
    };
  },
  components: {
    TodaysOrder: TodaysOrder,
    SalesStatistics: SalesStatistics,
  },
});
</script>

<style lang="less" scoped>
.orderManageContainer {
  .topTabContainer {
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .bodyContainer {
    padding: 40px;
  }
}
</style>
